<template>
  <div class="help-container">
    <!-- 导航栏 -->
    <van-nav-bar
      title="帮助"
      left-arrow
      @click-left="goBack"
      :style="{ backgroundColor: '#FFD847' }"
    />

    <!-- 帮助文档列表 -->
    <div class="help-list">
      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item
          v-for="help in helpList"
          :key="help.id"
          :name="help.id"
          :title="help.title"
        >
          <div class="help-content">
            <div v-html="formatContent(help.content)"></div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>

    <!-- 空状态 -->
    <van-empty
      v-if="helpList.length === 0 && !loading"
      description="暂无帮助文档"
      image="search"
    />

    <!-- 加载状态 -->
    <van-loading
      v-if="loading"
      type="spinner"
      color="#FFD847"
      vertical
      class="loading-center"
    >
      加载中...
    </van-loading>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHelpList } from '@/api'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const helpList = ref([])
const activeNames = ref('')  // 手风琴模式下使用字符串
const loading = ref(false)

// 返回上一页
const goBack = () => {
  router.back()
}

// 获取帮助文档列表
const fetchHelpList = async () => {
  loading.value = true
  try {
    const data = await getHelpList()
    if (data && data.helpList) {
      helpList.value = data.helpList
    }
  } catch (error) {
    console.error('获取帮助文档失败:', error)
    showToast('获取帮助文档失败')
  } finally {
    loading.value = false
  }
}

// 格式化内容（将换行符转换为 HTML）
const formatContent = (content) => {
  if (!content) return ''
  
  // 将换行符转换为 <br> 标签
  let formatted = content.replace(/\n/g, '<br>')
  
  // 将列表项（• 开头）添加样式
  formatted = formatted.replace(/•\s*/g, '<div class="list-item">• ')
  formatted = formatted.replace(/<br><br>/g, '</div><br>')
  
  return formatted
}

onMounted(() => {
  fetchHelpList()
})
</script>

<style lang='scss' scoped>
.help-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;

  // 返回箭头样式
  :deep(.van-nav-bar__arrow) {
    color: #333;           /* 箭头颜色 */
    font-size: 18px;       /* 箭头大小 */
    font-weight: 600;      /* 箭头粗细 */
  }

  .help-list {
    margin: 10px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    :deep(.van-collapse-item) {
      border-bottom: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .van-collapse-item__title {
        font-size: 15px;
        font-weight: 500;
        color: #333;
        padding: 15px 16px;
        
        &--expanded {
          color: #FFD847;
        }
      }

      .van-collapse-item__content {
        padding: 0 16px 15px;
        color: #666;
        font-size: 14px;
        line-height: 1.8;
      }
    }
  }

  .help-content {
    :deep(.list-item) {
      margin: 5px 0;
      padding-left: 10px;
      line-height: 1.8;
    }

    :deep(strong) {
      color: #333;
      font-weight: 600;
    }
  }

  .loading-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  :deep(.van-empty) {
    margin-top: 100px;
  }
}
</style>